<template>
    <div class="buyer-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="text">{{item.applicantName}}</span>
                    <el-button class="button" plain text type="primary" @click="drawer = true">查看详情</el-button>
                </div>
            </template>
            <div style="margin-left: 25px;">
                <div class="item" v-for="it in list" :key="it.value">
                    <span class="label">{{it.label ? it.label : ""}} : </span>
                    <span class="value">{{it?.data[item[it.value]]?.label ? it?.data[item[it.value]]?.label :""}}</span>
                </div>
            </div>
            <div class="footer">
                <span style="margin-right : 1rem">
                    申请日期: {{formatDate(item.applyDate)}}
                </span>
                <span>
                    签字人:{{item.signer}}
                </span>
            </div>
        </el-card>
        <el-drawer size="50%" v-model="drawer" :title="item.applicantName" direction="rtl">
            <div>
                <div class="item" v-for="it in list" :key="it.value">
                    <span class="label">{{it.label}} : </span>
                    <span class="value">{{it.data[item[it.value]]?.label}}</span>
                </div>
                <div class="item" v-for="it in dataList" :key="it.value">
                    <span class="label">{{it?.label}} : </span>
                    <span class="value">{{it?.format(item[it.value])}}</span>
                </div>
                <div class="info">
                    <span>
                        申请日期: {{formatDate(item.applyDate)}}
                    </span>
                    <span>
                        签字人:{{item.signer}}
                    </span>
                </div>
            </div>
            <template #footer>
                <div class="btn-container">
                    <el-button @click="drawer = false">取消</el-button>
                    <el-button @click="dialogVisible = true">进行摘牌</el-button>
                </div>
            </template>
        </el-drawer>

        <el-dialog v-model="dialogVisible" title="请确认你的挂牌信息" width="500px">
            <SellerData />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-popconfirm title="你确定要摘牌" confirm-button-text="确认摘牌" cancel-button-text="取消"
                        confirm-button-type="primary" @confirm="confirmClick(item)">
                        <template #reference>
                            <el-button class="button" type="primary">摘牌
                            </el-button>
                        </template>
                    </el-popconfirm>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { buyerDelistingApi } from '../../../../../api/user';
import SellerData from '../../ownSeller/component/SellerData.vue';

import { responseCallback } from '../../../../../utils';
import { formatDate } from '../../../../../utils/date';
import { dataList, list } from "../data";


defineProps(["item"])

const drawer = ref(false);

const dialogVisible = ref(false);


const confirmClick = function (item) {
    responseCallback({
        promise: buyerDelistingApi({
            id: item.id
        }),
        successMessage: "摘牌成功，请到交易中心进行后续操作！！！",
        cb() {
            setTimeout(() => {
                location.reload()
            }, 1000);
        }
    })
}

</script>

<style lang="less" scoped>
.buyer-container {

    margin-bottom: 2rem;
    width: 45%;
    cursor: pointer;

    .box-card {
        transition: all .3s ease;

        &:hover {
            box-shadow: 0 26px 40px -24px #002464;
            transform: translateY(-3%);
        }

    }

    .card-header {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .text {
            width: 60%;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .button {
            width: 100px;
        }
    }

    .btn-container {
        display: flex;
        justify-content: space-around;
    }

    .item {
        margin-bottom: .75rem;

        .label {
            width: 130px;
            display: inline-block;
        }

    }

    .footer {
        margin-top: 2rem;
        display: flex;
        justify-content: flex-end;
    }

    .el-drawer {
        .item {
            padding-bottom: 10px;
            border-bottom: 1px dashed #ccc;
        }

        .label {
            width: 150px;
            display: inline-block;

        }

        .info {
            margin-top: 20px;
            display: flex;
            font-weight: 700;
            justify-content: flex-end;

            span:first-child {
                margin-right: 1rem;
            }
        }
    }

}
</style>